<template>
	<view class="self-box">
		<view class="top">
			<view class="area-box">
				<i class="iconfont icon-dingweibai area-box-icon"></i>
				<areaSelect v-model="areaCode" @change="init" :defaultSelect="false"></areaSelect>
			</view>
			<view class="top-tip">{{ pageData.subtitle }} 更新</view>
		</view>
		<view class="top1">
			<listSelect v-model="warn" :list="warnList" style="width: 150rpx" class="top1-item"></listSelect>
			<listSelect v-model="color" :list="colorList" style="width: 150rpx" class="top1-item"></listSelect>
			<view :class="{ 'top1-item-active': choseType == 0 }" class="top1-item" @click="choseTypeCG(0)">全部</view>
			<view :class="{ 'top1-item-active': choseType == 1 }" class="top1-item" @click="choseTypeCG(1)">生效中</view>
		</view>
		<scroll-view scroll-y class="main-box">
			<u-collapse ref="collapse" class="item-box-list" v-if="pageData.alarmSignalList.length > 0">
				<u-collapse-item
					@change="(e) => fnColChange(e, item, index)"
					v-for="(item, index) in tableDatas"
					:key="index"
					class="item-collapse"
				>
					<template slot="title-all">
						<view class="col-box">
							<view class="item-box">
								<image
									:src="`/data/icon/signIcon/${item.signalType}${item.signalLevel}预警信号.png`"
									mode="widthFix"
									style="width: 100rpx; margin-left: 15rpx"
								/>
								<view class="font-set">
									<view class="title-box">
										<view class="fontSize-text">{{ item.signalType }}{{ item.signalLevel }}预警</view>
										<view class="trIcon fs25 blueBg" v-if="item.change != 3"> {{ item.changeStr }} </view>
										<view class="trIcon fs25 grayBg" v-if="item.change == 3"> {{ item.changeStr }} </view>
									</view>

									<view class="fs24 mt15">{{ item.cTime }}发布</view>
								</view>
							</view>
							<u-icon v-show="colShowList.includes(index)" name="arrow-up-fill" size="20" color="#607589"></u-icon>
							<u-icon v-show="!colShowList.includes(index)" name="arrow-down-fill" size="20" color="#607589"></u-icon>
						</view>
					</template>
					<view
						hover-class="hoverCLass"
						v-for="(sinData, index) in pageData.childSignals"
						:key="index"
						class="slot-body-box"
						@click="fnOpenSignModal(sinData)"
					>
						<view class="u_flex_cc">
							<view class="trIcon fs25 grBg" v-if="sinData.change == 0">
								{{ sinData.changeStr }}
							</view>
							<view class="trIcon fs25 redBg" v-if="sinData.change == 1">
								{{ sinData.changeStr }}
							</view>
							<view class="trIcon fs25 grayBg" v-if="sinData.change == 3">
								{{ sinData.changeStr }}
							</view>
							<view class="trIcon fs25 ylBg" v-if="sinData.change == 2">{{ sinData.changeStr }} </view>
							<view class="fontSize-text trTitle"
								>{{ item.department }}{{ item.changeStr }}{{ item.signalType }}{{ item.signalLevel }}预警信号</view
							>
						</view>
						<view class="fontSize-small nop">{{ sinData.cTime1 }}</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</scroll-view>
		<view class="sticky-btn" @click="goSignMap">
			<i class="iconfont icon-dingweibai pos-icon"></i>
			预警地图
		</view>
		<u-modal v-model="modalShow" width="90%" :show-title="false" :show-confirm-button="false">
			<view class="modal-custom">
				<u-icon name="close" class="modal-close" :size="28" color="#666" @click="cancel"> </u-icon>
				<view class="item-box">
					<image
						:src="`/data/icon/signIcon/${modalData.signalType}${modalData.signalLevel}预警信号.png`"
						mode="widthFix"
						style="width: 100rpx; margin-left: 15rpx"
					/>
					<view class="font-set">
						<view class="fontSize-title">{{ modalData.signalType }}{{ modalData.signalLevel }}预警</view>
						<view class="fontSize-small nop">{{ modalData.department }}{{ modalData.cTime2 }} 发布</view>
					</view>
				</view>
				<view class="text-head fontSize-text">
					{{ modalData.department }}{{ modalData.cTime3 }}{{ modalData.changeStr }}{{ modalData.signalType
					}}{{ modalData.signalLevel }}预警信号
				</view>
				<view class="u_flex_vc">
					<!-- <image src="../../../static/image/common/book.png" mode="widthFix" style="width: 32rpx" /> -->
					<text class="ml10 fontSize-title1">防御指南：</text>
				</view>
				<view class="info-body fontSize-text" v-for="(item, index) in modalData.defense" :key="index">
					<text class="fontSize-text"> {{ item }}{{ index != modalData.defense.length - 1 ? '；' : '' }} </text>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import warnApi from '@/api/monitor/warn.js'
	import areaSelect from '@/components/common/select/areaSelect.vue'
	import listSelect from '@/components/common/select/listSelect.vue'
	import moment from 'moment'
	export default {
		name: 'qx',
		components: {
			areaSelect,
			listSelect
		},
		data() {
			return {
				modalShow: false,
				modalData: {},
				choseType: 0,
				areaCode: '',
				choseVal: [0, 1, 2],
				color: '全部',
				warn: '全部',
				warnList: [
					{ label: '全部', value: '全部', extra: 0 },
					{ label: '冰雹', value: '冰雹', extra: 1 },
					{ label: '台风', value: '台风', extra: 2 },
					{ label: '大雾', value: '大雾', extra: 3 },
					{ label: '大风', value: '大风', extra: 4 },
					{ label: '寒潮', value: '寒潮', extra: 5 },
					{ label: '干旱', value: '干旱', extra: 6 },
					{ label: '暴雨', value: '暴雨', extra: 7 },
					{ label: '暴雪', value: '暴雪', extra: 8 },
					{ label: '雷电', value: '雷电', extra: 9 },
					{ label: '霜冻', value: '霜冻', extra: 10 },
					{ label: '高温', value: '高温', extra: 11 }
				],
				colorList: [
					{ label: '全部', value: '全部', extra: 0 },
					{ label: '蓝色', value: '蓝色', extra: 1 },
					{ label: '黄色', value: '黄色', extra: 2 },
					{ label: '橙色', value: '橙色', extra: 3 },
					{ label: '红色', value: '红色', extra: 4 }
				],
				pageData: {
					subtitle: '',
					alarmSignalList: [],
					childSignals: [],
					modalData: {}
				},
				defenseList: [],
				colShowList: []
			}
		},
		methods: {
			// 获取预警信号
			async init() {
				if (!this.areaCode) return
				uni.showLoading({
					title: '加载中'
				})
				let areaCode
				if(this.areaCode == '350405') {
					// 清流县兼容	
					areaCode = '350427'
				}else if(this.areaCode == '350404') {
					// 三元区兼容
					areaCode = '350400'
				}else {
					areaCode = this.areaCode
				}
				let params = {
					areaCode: areaCode,
					StatusFilter: this.choseType,
					SignalCategory: this.areaCode == '350400' || this.areaCode == '350404' ? [1] : [0],
					SignalType: null,
					SignalLevel: null,
					OnlyGetPorcessLastOne: true,
					pageSize: 30
				}
				let res = await warnApi.GetAlarmSignal(params)
				if (res.success) {
					if (res.data.items.length > 0) {
						this.pageData.subtitle = res.data.items[0].cTime
					}
					this.pageData.alarmSignalList = res.data.items.map((item) => {
						item.cTime = moment(item.cTime).format('MM月DD日 HH:mm')
						return item
					})
				} else {
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
				this.$hideLoading()
			},
			async fnColChange(e, val, idx) {
				this.colShowList = []
				if (!e.show) {
					return
				}
				this.colShowList.push(idx)
				this.pageData.childSignals = []
				uni.showLoading({
					title: '加载中'
				})
				let params = {
					pid: val.pid
				}
				let res = await warnApi.GetProcessList(params)
				if (res.success) {
					this.pageData.childSignals = res.data.map((item) => {
						item.cTime1 = moment(item.cTime).format('MM-DD HH:mm')
						return item
					})
					this.$nextTick(() => {
						this.$refs.collapse.init()
					})
				} else {
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
				this.$hideLoading()
			},
			async fnOpenSignModal(data) {
				uni.showLoading({
					title: '加载中'
				})
				data.cTime2 = moment(data.cTime).format('MM月DD日 HH:mm')
				data.cTime3 = moment(data.cTime).format('YYYY年MM月DD日 HH时mm分')
				if (this.defenseList.length == 0) {
					const resp = await warnApi.GetAlarmSignalDefense()
					if (resp.success) {
						this.defenseList = resp.data
						let fObj = this.defenseList.find((item) => item.level == data.signalLevel && item.type == data.signalType)
						if (fObj) {
							data.defense = fObj.guide.split('；')
						}
						this.modalData = data
						this.modalShow = true
					} else {
						// uni.showToast({
						// 	icon: 'error',
						// 	title: '获取失败'
						// })
					}
				} else {
					let fObj = this.defenseList.find((item) => item.level == data.signalLevel && item.type == data.signalType)
					if (fObj) {
						data.defense = fObj.guide.split('；')
					}
					this.modalData = data
					this.modalShow = true
				}

				this.$hideLoading()
			},
			goSignMap() {
				uni.navigateTo({ url: '/pages-subPackages/monitor/warnMap' })
			},
			cancel() {
				this.modalShow = false
			},
			// 全部还是生效中
			choseTypeCG(type) {
				this.choseType = type
				this.init()
			}
		},
		computed: {
			tableDatas() {
				const items = this.pageData.alarmSignalList.filter((el) => {
					return (
						(el.areaCode == this.areaCode ||
							(el.areaCode == '350427' && this.areaCode == '350405') || 
							(el.areaCode == '350400' && this.areaCode == '350404') ||
							this.areaCode == '350400' ||
							(this.areaCode == '000000' && el.areaCode == '350400')) &&
						(el.signalType == this.warn || this.warn == '全部') &&
						(el.signalLevel == this.color || this.color == '全部')
					)
				})
				return items
			}
		},
		mounted() {
			this.init()
		}
	}
</script>
<style lang="less" scoped>
	.self-box {
		height: 100%;
		width: 100%;
		background: #fff;
		.top {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			.area-box {
				display: flex;
				align-items: center;
				background: #edf5ff;
				border-radius: 10rpx;
				padding: 15rpx;
				font-size: 30rpx;
				.area-box-icon {
					margin-right: 15rpx;
					color: #41a4ff;
				}
				::v-deep .u-icon__icon {
					font-size: 20rpx !important;
					color: #607589;
				}
				::v-deep .areaSelect-box {
					font-size: 30rpx;
				}
			}
			.top-tip {
				color: #cbcbcb;
			}
		}
		.top1 {
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			border-top: 2rpx solid rgba(151, 151, 151, 0.21);
			border-bottom: 2rpx solid rgba(151, 151, 151, 0.21);

			::v-deep .u-icon__icon {
				color: #607589;
				font-size: 14rpx !important;
			}
			::v-deep .areaSelect-box {
				font-size: 30rpx;
			}
			.top1-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				/deep/.areaSelect-box {
					width: 100%;
					justify-content: center;
				}
			}
			.top1-item-active {
				color: rgba(255, 35, 35, 1);
			}
		}
		.main-box {
			height: calc(100% - 260rpx);
		}
		.col-box {
			width: 100%;
			padding-right: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.item-box-list {
			width: 100%;
			padding: 15rpx;

			.hoverCLass {
				background: rgba(244, 249, 254, 1);
			}

			.item-collapse {
				width: 100%;
				border-bottom: 1rpx solid rgba(151, 151, 151, 0.21);
			}
			::v-deep .u-collapse-head {
				padding: 0;
			}
			.item-box {
				position: relative;
				width: 100%;
				height: 130rpx;
				display: flex;
				align-items: center;

				.font-set {
					margin-left: 20rpx;
				}
				.fontSize-text {
					font-size: 30rpx;
					font-weight: 550;
					color: #0d1014;
					line-height: 37rpx;
				}
				.fs24 {
					font-size: 24rpx;
					font-weight: 500;
					color: #828282;
					line-height: 30prx;
				}
				.title-box {
					display: flex;
					align-items: center;
				}
				.trIcon {
					// width: 125rpx;
					margin-left: 40rpx;
					height: 44rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: red;
					// padding-right: 20rpx;
					padding: 0 7px;
					// position: absolute;
					color: #fff;
					// top: 30rpx;
					// right: 180rpx;
				}
				.blueBg {
					background: linear-gradient(90deg, #61bdff 0%, #587dff 100%);
				}
				.redBg {
					background: rgba(254, 105, 105, 1);
				}
				.grayBg {
					background: rgba(178, 178, 178, 1);
				}
			}
			.slot-body-box {
				height: 84rpx;
				width: 100%;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 15rpx;
				background: #fefffe;
				color: #5f5f5f;

				.u_flex_cc {
					display: flex;
					align-items: center;
					justify-content: center;
					.trIcon {
						width: 120rpx;
						white-space: nowrap;
						border: 1rpx solid #afafaf;
						text-align: center;
						padding: 5rpx;
						border-radius: 10rpx;
						font-size: 22rpx;
					}
					.trTitle {
						margin-left: 15rpx;
						width: 405rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.ylBg {
						border: 1rpx solid rgba(255, 172, 36, 1);
						color: rgba(255, 172, 36, 1);
						background: rgba(255, 172, 36, 0.151);
					}
					.grBg {
						border: 1rpx solid rgb(0, 122, 255);
						color: #007aff;
						background: rgba(0, 122, 255, 0.151);
					}
					.redBg {
						border: 1rpx solid rgba(254, 105, 105, 1);
						color: rgba(254, 105, 105, 1);
						background: rgba(254, 105, 105, 0.151);
					}
					.grayBg {
						border: 1rpx solid rgba(178, 178, 178, 1);
						color: rgba(178, 178, 178, 1);
						background: rgba(178, 178, 178, 0.151);
					}
				}
			}
		}
		.modal-custom {
			position: relative;
			padding-bottom: 20rpx;
			font-size: 24rpx;
			padding: 20rpx;
			.item-box {
				position: relative;
				width: 100%;
				min-height: 100rpx;
				height: fit-content;
				display: flex;
				align-items: center;
				// border-bottom: 1rpx solid rgba(151, 151, 151, 0.51);
				.fontSize-title {
					color: #4e4e4e;
					font-size: 38rpx;
					font-weight: 600;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(188, 188, 188, 0.4);
				}
				.font-set {
					width: 450rpx;
					margin-left: 32rpx;
					.fontSize-small {
						color: #828282;
					}
				}
				.fs26 {
					font-size: 28rpx;
					font-weight: 600;
					color: #0d1014;
					line-height: 37rpx;
				}
				.fs24 {
					font-size: 24rpx;
					font-weight: 500;
					color: #afafaf;
					line-height: 30prx;
				}
				.trIcon {
					width: 135rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 0px 0px 0px 20rpx;
					text-align: center;
					background: red;
					position: absolute;
					color: #fff;
					top: 0;
					right: 0;
				}
				.redBg {
					background: rgba(254, 105, 105, 1);
				}
				.grayBg {
					background: rgba(178, 178, 178, 1);
				}
			}
			.fontSize-title1 {
				color: #000000;
				font-size: 32rpx;
				font-weight: 600;
			}
			.text-head {
				margin-top: 30rpx;
				text-indent: 36rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}
			.u_flex_vc {
				margin: 15rpx 0;
				.font-weight {
					font-weight: bold;
					font-size: 30rpx;
				}
			}
			.info-body {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				padding-left: 12rpx;
				line-height: 46rpx;
			}
			.modal-close {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				font-size: 60rpx;
				// color: #666;
				z-index: 999;
				padding: 20rpx;
			}
		}

		.sticky-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #41a4ff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
		}
		.mb10 {
			margin-bottom: 10rpx;
		}
		.pos-icon {
			color: #fff;
			margin-right: 10rpx;
		}
	}
</style>
